<template>
    <div class="qilin-index">
        <HeaderNav></HeaderNav>
        <div class="qilin-index-container">
            <LeftMenu></LeftMenu>
            <div class="qilin-index-container-content qilin-py-4 qilin-pr-4" :style="getLeftPadding">
                <TagsView></TagsView>
                <!-- <el-button @click="subscribe">订阅消息</el-button>
                <el-button @click="send">发送消息</el-button> -->
                <div class="qilin-index-container-content-box beauty-scrollbar-y">
                    <!-- <el-config-provider :locale="zhCn"> -->
                        <!-- <router-view v-slot="{Component}">
                            <keep-alive :max="10">
                                <component :is="Component"></component>
                            </keep-alive>
                        </router-view> -->
                        <router-view></router-view>
                    <!-- </el-config-provider> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import HeaderNav from "./headerNav.vue";
import LeftMenu from "./leftMenu.vue";
import TagsView from "./tagsView.vue";
import {uploadImageUrl,uploadXlsxUrl} from "@/setting.js";
import {homePinia} from "@/store/home/index.js";
const homePiniaStore=homePinia();

// import stompService from '@/utils/stomp.js';

// stompService.connect({
//     onConnect:()=>{
//         console.log("连接成功");
//     },
//     onError:(err)=>{
//         console.log(err);
//     }
// }).then((res)=>{
//     console.log("连接成功",res);
// });

// // 订阅消息
// const subscribe=()=>{
//     stompService.subscribe("/table/123",(msg)=>{
//         console.log("收到消息：",msg);
//     });
// };
// // 发送信息
// const send=()=>{
//     stompService.send("/app/update-cart",{
//         "tableId": 123,
//         "dish": {
//             "dishId":"1",
//             "dishName":"xxx",
//             "quantity":1,
//             "price":123
//         },
//         "operation": "add"
//     });
// };

provide("urlInfo",{
    uploadImageUrl,
    uploadXlsxUrl
});

// 获取内容展示区左侧padding值
const getLeftPadding=computed(()=>{
    return `padding-left:${homePiniaStore.getWidth + 1.428}rem;`;
});

</script>

<style lang="scss" scoped>
.qilin-index{
    @include QilinWidthHeight();
    overflow:hidden;
    min-width:42.857rem;
    >.qilin-index-container{ //各页面的入口元素
        width:100%;
        height:calc(100vh - 4.286rem);
        >.qilin-index-container-content{
            position: relative;
            // padding-left:15.714rem;
            transition:padding-left 1s linear 0s;
            height:100%;
            background-color:#f0f0f0;
            >.qilin-index-container-content-box{
                height:calc(100% - $rem20);
            }
        }
    }
}
</style>
